osdWindow: don't use custom cairo drawing

We can just set the width on a regular actor inside the StBin.

https://bugzilla.gnome.org/show_bug.cgi?id=758471

diff --git a/data/theme/gnome-shell-high-contrast.css b/data/theme/gnome-shell-high-contrast.css
index 8b61bc15e68f021818f945a37943cc91931b34de..bb1255a17c53c35b4946f67d161e55cbaab6f618 100644 (file)
--- a/data/theme/gnome-shell-high-contrast.css
+++ b/data/theme/gnome-shell-high-contrast.css
@@ -535,6 +535,9 @@ StScrollBar {
     border-radius: 0.3em;
     background-color: rgba(11, 12, 13, 0.5);
     color: #eeeeec; }
+  .osd-window .level-bar {
+    background-color: #eeeeec;
+    border-radius: 0.3em; }
 
 /* App Switcher */
 .switcher-popup {

diff --git a/data/theme/gnome-shell-sass b/data/theme/gnome-shell-sass
index 6ccc1808114d803f6699877143c614f14aaf14ea..31aac7f7b524786965e4c9a1890009ea362b9c87 160000 (submodule)
--- a/data/theme/gnome-shell-sass
+++ b/data/theme/gnome-shell-sass
@@ -1 +1 @@
-Subproject commit 6ccc1808114d803f6699877143c614f14aaf14ea
+Subproject commit 31aac7f7b524786965e4c9a1890009ea362b9c87

diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index ebdd7fdc8e40aa1d436da4198a4e05625d40a084..d3155edf10727934c70941df7d6b893c3624c842 100644 (file)
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -535,6 +535,9 @@ StScrollBar {
     border-radius: 0.3em;
     background-color: rgba(11, 12, 13, 0.5);
     color: #eeeeec; }
+  .osd-window .level-bar {
+    background-color: #eeeeec;
+    border-radius: 0.3em; }
 
 /* App Switcher */
 .switcher-popup {

diff --git a/js/ui/osdWindow.js b/js/ui/osdWindow.js
index bcdc391808c6672b0303c37753216fa01c2b3ae0..53ccc976c522f09c119069f9d6895f227d1329e8 100644 (file)
--- a/js/ui/osdWindow.js
+++ b/js/ui/osdWindow.js
@@ -22,9 +22,9 @@ const LevelBar = new Lang.Class({
         this._level = 0;
 
         this.actor = new St.Bin({ style_class: 'level',
-                                  x_fill: true, y_fill: true });
-        this._bar = new St.DrawingArea();
-        this._bar.connect('repaint', Lang.bind(this, this._repaint));
+                                  x_align: St.Align.START,
+                                  y_fill: true });
+        this._bar = new St.Widget({ style_class: 'level-bar' });
 
         this.actor.set_child(this._bar);
     },
@@ -38,35 +38,10 @@ const LevelBar = new Lang.Class({
         if (newValue == this._level)
             return;
         this._level = newValue;
-        this._bar.queue_repaint();
-    },
-
-    _repaint: function() {
-        let cr = this._bar.get_context();
-
-        let node = this.actor.get_theme_node();
-        let radius = node.get_border_radius(0); // assume same radius for all corners
-        Clutter.cairo_set_source_color(cr, node.get_foreground_color());
-
-        let [w, h] = this._bar.get_surface_size();
-        w *= (this._level / 100.);
-
-        if (w == 0)
-            return;
 
-        cr.moveTo(radius, 0);
-        if (w >= radius)
-            cr.arc(w - radius, radius, radius, 1.5 * Math.PI, 2. * Math.PI);
-        else
-            cr.lineTo(w, 0);
-        if (w >= radius)
-            cr.arc(w - radius, h - radius, radius, 0, 0.5 * Math.PI);
-        else
-            cr.lineTo(w, h);
-        cr.arc(radius, h - radius, radius, 0.5 * Math.PI, Math.PI);
-        cr.arc(radius, radius, radius, Math.PI, 1.5 * Math.PI);
-        cr.fill();
-        cr.$dispose();
+        let width = this.actor.width;
+        width *= (this._level / 100.);
+        this._bar.width = width;
     }
 });